import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../../../theme/vars.css';
import SVGCalendar from '@mdi/svg/svg/calendar-month-outline.svg';
import SVGClock from '@mdi/svg/svg/clock-outline.svg';
import { knnoTable } from '../../../theme/table.css';

export const dateInputStyle = style({
	position: 'relative',
	selectors: {
		'&:before': {
			content: '',
			position: 'absolute',
			left: '0px',
			top: '0px',
			bottom: '0px',
			width: '3em',
			maskPosition: 'center',
			maskRepeat: 'no-repeat',
			maskSize: '1.6em',
		},
		'&.date:before': {
			background: vars.color.text,
			maskImage: "url('data:image/svg+xml;charset=utf8," + SVGCalendar + "')",
		},
		'&.time:before': {
			background: vars.color.text,
			maskImage: "url('data:image/svg+xml;charset=utf8," + SVGClock + "')",
		},
	},
});

globalStyle(`${knnoTable} :is(th,td).${dateInputStyle}`, {
	paddingLeft: '2.5em',
});
